JavaScript 设计模式之工厂模式

Author Avatar
Klein 8月 27, 2018

介绍

常用于面向对象创建实例的过程。

  • 将 new 操作单独封装
  • 遇到 new 时，就要考虑是否该使用工厂模式。

类似于买汉堡，直接点餐取餐，无需自己亲手做。

演示代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Product {
    constructor(name) {
        this.name = name
    }
    init() {
        console.log('init');
    }
    fn1() {
        console.log('fn1');
    }
    fn2() {
        console.log('fn2');
    }
}
class Creator {
    create(name) {
        return new Product(name)
    }
}

// 测试
let creator = new Creator()
let p1 = creator.create('p1')
p1.init()
p1.fn1()
p1.fn2()
// init
// fn1
// fn2

场景

jQuery $(‘div’)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class JQuery {
    constructor() {
        let slice = Array.prototype.slice
        let dom = slice.call(documentSelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len
        this.selector = selector || ''
    }
    append(node) {

    }
    addClass(name) {
        
    }
    html(data) {

    }
    // 此处省略若干 API
}
window.$ = function (selector) {
    return new JQuery(selector)
}

React.createElement

Vue 异步组件

1
2
3
4
5
6
7
Vue.component('async-example', function(resolve, reject) {
    setTimeout(() => {
        resolve({
            template: '<div>I am async!</div>'
        })
    }, 1000);
})

设计原则验证

  • 构造函数和创建者分离
  • 符合开放封闭原则

参考资料

Javascript 设计模式系统讲解与应用